<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端交互用户操作表</title>
		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
		<style>
		.b{
			width: 244px;
		}
		.c{
			width: 216px;
		}
		</style>
	</head>
	<body>
		<div id="app">
			<a name="_top"></a>
			<table align="center"border="1%" width="1000px" style="margin-bottom: 0px;margin-top: 20px;border-color: darkcyan;background-color: azure;">
				<tr><th colspan="5">用户新增/用户修改</th> </tr>
				<tr>
					<td colspan="5">
						
						姓名：<input type="text"v-model="insUser.name" class="b"/> 
						年龄：<input type="text"v-model="insUser.age" class="b"/> 
						性别：<input type="text"v-model="insUser.sex" class="b"/> 
						<a href="#_bottom"><button @click="insertUser()" style="background-color:green;border-color: green;color: white;">新增用户</button></a>	
					</td>
				</tr>
				<a name="_up"></a>
				<tr>
					<td>
						<input type="text "class="c" v-model="updUser.id" placeholder="编号(不可更改)"disabled/>
						<input type="text" class="c" v-model="updUser.name" placeholder="姓名"/>
						<input type="text" class="c" v-model="updUser.age" placeholder="年龄"/>
						<input type="text" class="c" v-model="updUser.sex" placeholder="性别"/>
						<button @click="updateUser()" style="background-color:royalblue;border-color: royalblue;color: white;">修改信息</button>
					</td>
				</tr>
				<tr>
					<td>
						<input type="text" placeholder="编号" v-model="selUser.id" class="c"/>
						<input type="text" placeholder="姓名" v-model="selUser.name" class="c"/>
						<input type="text" placeholder="年龄" v-model="selUser.age" class="c"/>
						<input type="text" placeholder="性别" v-model="selUser.sex" class="c"/>
						<button @click="selectUser()" style="background-color:coral;border-color:coral;color: white;">查询用户</button>
					</td>
				</tr>
				<table align="center"border="1px" width="1000px" style="margin-bottom: 15px;margin-top: 0px;border-color: darkcyan;background-color: azure;">
					<tr>
						<th colspan="5">查询结果</th>
					</tr>
					<tr>
						<th>编号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>修改、删除</th>
					</tr>
					<tr v-for="user2 in resultList">
						<td v-text="user2.id"></td>
						<td v-text="user2.name"></td>
						<td v-text="user2.age"></td>
						<td v-text="user2.sex"></td>
						<td width="110px" align="center">
						<a href="#_up"><button @click="echo(user)" style="background-color: dodgerblue;border-color: dodgerblue;color: white;">修改</button></a>	
							<button @click="deleteUser(user)" style="background-color: orangered;border-color: orangered;color: white;">删除</button>
						</td>
					</tr>
				</table>
				
			</table>
			<table align="center" width="1000px" border="1px" bordercolor="blue">
				<tr>
					<th colspan="5"><h4>用户列表</h4></th>
				</tr>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>修改、删除</th>
				</tr>
				<tr v-for="user in userList">
					<td v-text="user.id"></td>
					<td v-text="user.name"></td>
					<td v-text="user.age"></td>
					<td v-text="user.sex"></td>
					<td width="110px" align="center">
					<a href="#_up"><button @click="echo(user)" style="background-color: dodgerblue;border-color: dodgerblue;color: white;">修改</button></a>	
						<button @click="deleteUser(user)" style="background-color: orangered;border-color: orangered;color: white;">删除</button>
					</td>
				</tr>
			</table>
			<div align="center"><a href="#_top"><button style="background-color: #7FFFD4;border-color: white;margin-top: 10px;">回到顶部</button> </a> </div>
			<a name="_bottom"></a>
		</div>
		<script>
		axios.defaults.baseURL="http://localhost:8080/user"
		const app = new Vue({
			el:"#app",
			data:{
				userList:[],
				insUser:{
					name:'',
					age:'',
					sex:''
				},
				updUser:{
					id:'',
					name:'',
					age:'',
					sex:''
				},
				selUser:{
					id:'',
					name:'',
					age:'',
					sex:''
				},
				resultList:[]
			},
			methods:{
				async findall(){
					let {data: all} = await axios.get("/all")
					this.userList=all
				},
				async insertUser(){
					let {data: ins} = await axios.post("/insertUser",this.insUser)
					alert(ins)
					this.findall()
					this.insUser={}
				},
				async deleteUser(user){
					let {data:del} = await axios.delete(`/deleteUser/${user.id}`)
					alert(del)
					this.findall()
				},
				echo(user){
					// this.updUser.id=user.id
					// this.updUser.name=user.name
					// this.updUser.age=user.age
					// this.updUser.sex=user.sex
					// this.findall()
					this.updUser=user
					// this.selUser=user
					this.findall()
				},
				async updateUser(){
					let {data:up} = await axios.put("/updateUser",this.updUser)
					alert(up)
					this.findall()
					this.updUser={}
				},
				async selectUser(){
					let {data:sele} = await axios.get("/selectUser",{params:this.selUser})
					console.log(sele)
				},
			},
			mounted() {
				this.findall()
			}
		})
		</script>
	</body>
</html>
